<template>
  <div class="notice-detail">
    <div class="notice-detail__header">
      <div class="notice-detail__title">
        {{detailInfo.name}}
      </div>
      <div class="notice-detail__brief">
        {{detailInfo.summary}}
      </div>
    </div>
    <div class="notice-detail__main" v-html="detailInfo.content"></div>
  </div>
</template>

<script>
  import {grid} from '@/build';
  import {
    systemNoticeDetailApi as detailApi,
    systemNoticeReadApi as readApi,
  } from '@/services/api/notice';

  export default {
    name: "notice-detail",


    mixins: [grid],

    data() {
      return {
        id: this.id,
        detailInfo: {}
      };
    },

    methods: {
      close() {
        this.$emit('close');
      }
    },

    watch: {
      '$route.params.id': {
        handler(id) {
          if (id) {
            this.$nextTick(() => {
              this.id = id;
              this.getAll();
            });
          } else {
            this.close();
          }
        },
        immediate: true,
      }
    },

    mounted() {
      this.bindGet(detailApi, 'detailInfo', {
        sendingData: 'id',
        afterSuccess:() => {
          if (this.detailInfo.status === consts.ANNOUNCEMENT_UNREAD) {
            this.doSave({action: 'read'});
          }
        }
      });
      this.bindSave(readApi, 'read', 'id', {
        successMessage: '',
        afterSuccess: () => {
          this.$emit('read', this.id);
          this.$store.dispatch(types.GET_GLOBAL_ANNOUNCEMENT_UNREAD);
        }
      });

    }
  };
</script>

<style lang="scss" scoped>
  @include b(notice-detail) {
    position: relative;

    @include e(header) {
      text-align: center;
    }
    @include e(title) {
      font-size: $--font-size-x-large;
      font-weight: bold;
      padding: 20px 0 15px 0;
    }
    @include e(brief) {
      color: $--color-text-secondary;
      font-size: $--font-size-small;
      padding-bottom: 30px;
    }
    @include e(main) {
      padding: 0 30px;
      box-sizing: border-box;
      height: 600px;
      max-width: 700px;
      overflow: auto;
    }

  }
</style>